// 自定义配色
import React, { useState } from 'react';
import InputColorPicker from './InputColorPicker';
import { Button, InputNumber, Table } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { PlusOutlined } from '@ant-design/icons';
// import { filterObjectNullKeys } from 'src/libs/utils';
// import { filterObjectNullKeys } from 'src/libs/utils';
const { Column } = Table;
interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
	colorName?: string;
}

const ColorSection = ( props: IProps ) => {
	let { config, form, onValuesChange, colorName = 'dataColorList' } = props;
	const [ dataColorList, setDataColorList ] = useState( ( config.style && config.style[colorName] ) || [] );
	// console.log( dataColorList );
	// 更新list
	const updateDataList = ( value ) => {
		setDataColorList( value );
		form.setFieldsValue( { [colorName]: value } );
		onValuesChange( config.type, config.key, { [ colorName ]: value }, 'style' );
	};

	// 颜色变化
	const handleChange = ( color, index ) => {
		let value = JSON.parse( JSON.stringify( dataColorList ) ); 
		value[index].color = color;
		updateDataList( value );
	};

	// 添加一项
	const handleAddClick = () => {
		let value = dataColorList.concat();
		value.push( { color: '#333', key: new Date().getTime() } );
		updateDataList( value );
	};

	// 删除一项
	const handleDeleteClick = ( index ) => {
		let value = dataColorList.concat();
		value.splice( index, 1 );
		updateDataList( value );
	};
    
	const onBlur = ( e, type, index ) => {
		// console.log( e.target.value );
		const value = +e.target.value;
		console.log( value );
		let item = JSON.parse( JSON.stringify( dataColorList ) ); 
		item[index][type] = value;
		updateDataList( item );
		// onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	return (
		<>
			<FormItem
				label=""
				name={colorName}
				labelAlign="left"
				labelCol={{ span: 0 }}
			>
				<p>数据颜色:</p>
				<Table dataSource={dataColorList} bordered pagination={false}>
					<Column
						title="大于"
						dataIndex="gt"
						key="gt"
						render={( text, record, index ) => {
							return (
								<InputNumber
									value={dataColorList[index]['gt']}
									onBlur={( e ) => onBlur( e, 'gt',index )} 
									onPressEnter={( e ) => onBlur( e, 'gt',index )} style={{ width: '100%' }}/>
							);
						}}
					/>
					<Column
						title="小于等于"
						dataIndex="lte"
						key="lte"
						render={( text, record, index ) => {
							return (
								<InputNumber
									value={dataColorList[index]['lte']}
									onBlur={( e ) => onBlur( e, 'lte',index )} 
									onPressEnter={( e ) => onBlur( e, 'lte',index )} style={{ width: '100%' }} />
							);
						}}
					/>
					<Column
						title="颜色"
						dataIndex="color"
						key="color"
						render={( text, record, index ) => {
							return (
								<InputColorPicker
									color={dataColorList[index].color}
									change={( color ) => handleChange( color, index )}
								></InputColorPicker>
							);
						}}
					/>
					<Column
						title="操作"
						dataIndex="opt"
						key="opt"
						render={( t, r, i ) => {
							return (
								<div
									onClick={( i ) => {
										handleDeleteClick( i );
									}}
								>
									<span className="iconfont bdhshanchu"></span>
								</div>
							);
						}}
					/>
				</Table>
				<div style={{ margin: '5px auto', textAlign: 'center' }}>
					<Button shape="circle" type="primary" size='middle' icon={<PlusOutlined />} onClick={handleAddClick}></Button>
				</div>
				
			</FormItem>
		</>
	);
};

export default React.memo( ColorSection );
